@import "../../styl/variable.styl"

.h2
  text-indent 1em

  &::before
    background-color $primary-color
    content ''
    width 16rpx
    height 16rpx
    position absolute
    top 50%
    left 0
    margin-top -12rpx
    transform rotate(45deg)

.card-list
  display flex
  flex-wrap wrap
  align-content space-between
  margin-top 2em

.card
  width 150rpx
  height 128rpx
  border 2rpx $primary-color solid
  border-radius 1em
  display flex
  flex-direction column
  justify-content space-between
  margin-left 70rpx
  padding 12rpx 0 6rpx
  font-size 20rpx

  .image-container
    display flex
    justify-content center
    align-items center
    height 70rpx

  text
    text-align center

  &:nth-child(n+4)
    margin-top 2em

  &:nth-child(3n + 1)
    margin-left 45rpx

  .icon1
    width 48rpx
    height 50rpx

  .icon2
    width 71rpx
    height 49rpx

  .icon3
    width 73rpx
    height 57rpx

  .icon4
    width 49rpx
    height 63rpx

  .icon5
    width 66rpx
    height 45rpx

  .icon6
    width 76rpx
    height 64rpx

.qrcode
  background-color #DDD
  display block
  margin 40rpx auto 0
  padding 40rpx
  width 400rpx
  height 400rpx

.footer
  color $primary-color
  text-align center

.grid-2
  display flex
  flex-direction row
  flex-wrap wrap
  justify-content center

  .grid-item
    width 298rpx

    &:nth-child(2n)
      margin-left 20rpx

    &:nth-child(n + 3)
      margin-top 20rpx

  image
    width 298rpx
    height 183rpx
    box-shadow 2px 2px 4px rgba(0,0,0,.15)


